<template>
    <pageBox>
        <view>
            <!-- 报警/咨询 -->
            <view class="nav">
                <view class="num1" v-show="num1 !=0">{{num1}}</view>
                <view class="num2" v-show="num2 !=0">{{num2}}</view>
                <view class="nav-name" v-for="(item,index) in nav" :key="index" @tap="bindNav(index)">
                    <view class="nav-name-in" :class="{act:index === current}">{{item.name}}</view>
                </view>
            </view>
            <view class="nav navTop" v-show="top">
                <view class="num1" v-show="num1 !=0">{{num1}}</view>
                <view class="num2" v-show="num2 !=0">{{num2}}</view>
                <view class="nav-name" v-for="(item,index) in nav" :key="index" @tap="bindNav(index)">
                    <view class="nav-name-in" :class="{act:index === current}">{{item.name}}</view>
                </view>
            </view>

            <!-- 设备/数据/事件 -->
            <view v-show="current=== 0">
                <view class="nav-title">
                    <picker mode="selector" :data-id="array[index].id" :value="index" :range="array" :range-key="'name'" class="nav-title-in" @change="bindEquipment">
                        <view class="uni-input">
                            <text>{{equipment}}</text>
                        </view>
                    </picker>
                    <picker mode="selector" @change="bindPickerChange" :value="index" :range="array1" :range-key="'name'" class="nav-title-in">
                        <view class="uni-input"><text>{{dataEquipment}}</text></view>
                    </picker>
                    <picker mode="date" @change="bindDateChange" class="nav-title-in">
                        <view class="uni-input"><text>{{equipmentTime}}</text></view>
                    </picker>

                    <picker mode="selector" @change="bindPickerScreen" :value="index" :range="array2" class="nav-title-in">
                        <view class="uni-input"><text>{{scsreen}}</text></view>
                    </picker>

                </view>
                <!-- 报警-列表 -->
                <view class="nav-list" v-for="(item,index) in navList" :key="index" @tap="bindButton(item)">
                    <view class="nav-list-in">
                        <!-- <view class="circle" v-show="item.dispose === '待处理'"></view> -->
                        <view class="nav-list-in-item">
                            <text class="nav-list-in-item-name">{{item.trigger_name}}</text>
                            <text class="nav-list-in-item-date">{{item.alarm_time}}</text>
                        </view>
                        <view class="nav-list-data">
                            <text>数据名称:{{item.equipment_name}}</text>
                        </view>
                        <view class="condition"> <text class="tex">当前数值:<text>&emsp;</text>{{item.value}}</text></view>
                        <view class="nav-list-content condition">
                            <!-- <text class="nav-list-content-in">推送内容:{{item.content}}</text> -->
                            <!-- <text class="nav-list-content-button" style='color:{{item.status(item.handle_status).y}}' @tap="bindButton(item)">{{item.handle_status_name}}</text> -->
                            <text v-if="item.handle_status_name === '已处理'" class="nav-list-content-button">{{item.handle_status_name}}</text>
                            <text v-if="item.handle_status_name === '未处理'" class="nav-list-content-button2">{{item.handle_status_name}}</text>
                            <text v-if="item.handle_status_name === '误报'" class="nav-list-content-button3">{{item.handle_status_name}}</text>
                        </view>
                    </view>

                </view>
                <!-- <view v-show="page >= max_page" style="text-align:center;
                color:#31373b;
                font-size:32rpx;
                 position: relative; 
                 top: 20px;
                 ">已无更多数据了...</view> -->
                <view style="text-align:center;
                color:#31373b;
                font-size:32rpx;
                margin-top:30rpx;
                 ">已无更多数据了...</view>
            </view>

            <!-- 咨询列表 -->
            <view class="" v-show="current === 1">
                <view v-for="(item,index) in consult" :key="index">
                    <view class="consult2" @tap="bindMsg(item.id)">
                        <view class="consult2-left">
                            <view>
                                <img :src="item.img"></img>
                            </view>
                        </view>
                        <view class="consult2-right">
                            <view class="consult2-right2">{{item.title}}</view>
                            <view class="consult2-right5" v-if="item.is_read == 1">已读</view>
                            <view class="consult2-right5" v-if="item.is_read == 0">未读</view>
                            <view class="consult2-right3">行业资讯</view>
                            <view class="consult2-right4">{{item.created_at}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </pageBox>
</template>

<script>
import {
    request
} from "../../comon/js/request.js";
export default {
    data() {
        return {
            form: {
                page: 1
            },
            changDtae: "",
            maxPage: "",
            scsreen: "选择状态",
            showMsg: "没有更多数据了",
            top: false,
            dataEquipment_ids: "",
            equipment_ids: "",
            equipment: "选择设备",
            dataEquipment: "选择温度",
            equipmentTime: "选择时间",
            index0: 0,
            consult: [],
            max_page: 0,
            page: 2,
            equipment_id: "",
            register_id: "",
            page2: 1,
            off_on: false,
            noRed: {},
            num1: 0,
            num2: 0,
            current: 0,
            array2: ["未处理", "已处理", "误报"],
            array: [{
                    name: "1",
                    id: 1
                },
                {
                    name: "2",
                    id: 2
                }
            ],
            array1: [],
            consult: [],
            navList: [],
            nav: [{
                    name: "报警"
                },
                {
                    name: "资讯"
                }
            ]
        };
    },
    onReachBottom() {
        // console.log("上拉加载更多");
        // this.getPullMore()
        if (this.form.page <= this.maxPage) {
            this.upInit();
        }
    },
    onPullDownRefresh() {
        this.upChange();
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 3000);
    },
    onShow() {
        // this.page = ""
        this.getNews();
        this.alarmRecord();
        this.removeTab();
        this.getScreen();
        this.getNotRead();
        this.pageChange(this.page);
        // this.getSirenLists()
        // this.getUnread()
        // this.getUnread2()
    },
    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop >= 100) {
            if (!this.top) {
                this.top = true
            }
        } else {
            if (this.top) {
                this.top = false
            }
        }
    },
    methods: {
        // 重置页数
        pageChange(page) {
            this.page = 2;
        },
        // 未读接口
        getNotRead() {
            request({
                url: "v1/wechat/notRead"
            }).then(res => {
                console.log(res, "未读未读");
                this.num2 = res.data.result;
            });
        },
        //首次请求赛选数据
        getScreen() {
            let token = uni.getStorageSync("token");
            uni.request({
                url: "https://yl.solid-cn.com/wechat/v1/equipment/choiceList",
                header: {
                    Accept: "application/json",
                    xcx: 1,
                    Authorization: `Bearer ${token}`
                }
            }).then(res => {
                console.log(res, "筛选筛选");
                this.array = res[1].data.result;
            });
        },
        //上拉加载更多
        getPullMore() {
            // this.page++
            // console.log(page2)
            // this.alarmRecord(this.page)
        },
        //未读消息
        getUnread2() {
            request({
                url: "v1/news/unread",
                method: "GET"
            }).then(res => {
                console.log(res, "获取未读消息");
                this.noRed = res;
            });
        },
        // 移除角标
        removeTab() {
            uni.removeTabBarBadge({
                index: 3
            });
        },
        //跳转详情页面
        bindMsg(id) {
            // console.log(id, "//////////////")
            uni.navigateTo({
                url: `../user/detailed/detailed?id=${id}`
            });
        },
        //报警记录列表
        alarmRecord(page) {
            this.scsreen = "选择状态"
            this.getCall();
            console.log(page, this.max_page);
            if (page >= this.max_page) {
                return null;
            }
            request({
                url: "v1/alarmRecord/list",
                method: "GET",
            }).then(res => {
                console.log(res, "报警记录列表");
                if (res.data.errorcode == 401) {
                    this.navList = [];
                } else {
                    this.maxPage = res.data.result.list.last_page
                    this.navList = res.data.result.list.data;
                    (this.equipment = "选择设备"),
                    (this.equipmentTime = "选择日期"),
                    (this.dataEquipment = "选择温度");
                    // for (let i = 0; i < this.navList.length; i++) {
                    //     this.aa += this.navList[i].value;
                    // }
                    console.log(this.num1, "////////////////");
                    if (this.num1 > 99) {
                        // this.num1 = "99+"
                        uni.setTabBarBadge({
                            index: 3,
                            text: "99+"
                        });
                    } else if (
                        this.num1 == 0 ||
                        this.num1 == "" ||
                        this.num1 == "null"
                    ) {
                        uni.removeTabBarBadge({
                            index: 3
                        });
                    } else {
                        uni.setTabBarBadge({
                            index: 3,
                            text: JSON.stringify(this.num1 + this.num2)
                        });
                    }
                }
            });
        },
        //获取报警未处理的数量
        getCall() {
            request({
                url: "v1/alarmRecord/alarmRecordCount",
                methods: "GET"
            }).then(res => {
                if (res.data.errorCode == 401) {
                    this.num1 = " ";
                } else {
                    this.num1 = res.data.result.alarm_not_handle;
                    console.log(res, "获取报警数据获取报警数据获取报警数据");
                }
            });
        },
        // 下拉刷新全部
        upChange() {
            this.changDtae = ""
            this.form = {
                page: 1,
            }
            console.log(this.form, "this.fomthis.fomthis.fomthis.fom")
            this.alarmRecord();
        },
        //默认首次上拉刷新
        upInit() {
            uni.showNavigationBarLoading();
            // this.form.page = 2
            this.form.page++
            request({
                url: "v1/alarmRecord/list",
                method: "GET",
                data: this.form
                // data: {
                //     // equipment_id:this.equipment_ids,
                //     // register_id:this.dataEquipment_ids,
                //     page: this.page
                // }
            }).then(res => {
                console.log(res, "::::::::::"),
                    this.maxPage = res.data.result.list.last_page
                this.navList = this.navList.concat(res.data.result.list.data);
                uni.hideNavigationBarLoading();
                if (this.num1 > 99) {
                    uni.setTabBarBadge({
                        index: 3,
                        text: "99+"
                    });
                } else if (this.num1 == 0) {
                    uni.removeTab({
                        index: 3
                    });
                } else {
                    uni.setTabBarBadge({
                        index: 3,
                        text: JSON.stringify(this.num1 + this.num2)
                    });
                }
            });
        },
        //获取未处理报警简报
        getUnread() {
            request({
                url: "v1/alarmRecord/unHandleRecord",
                method: "GET"
            }).then(res => {
                console.log(res, "获取未处理报警简报");
            });
        },
        //获取咨询列表
        getNews() {
            request({
                url: "v1/news/unread",
                method: "GET"
            }).then(res => {
                console.log(res, "获取资讯列表");
                this.consult = res.data.result;
                let arr = [];
                arr = res.data.result;
                // this.num2 = arr.length
            });
        },
        bindNav(index) {
            this.current = index;
        },
        bindButton(item) {
            console.log(item.id, "******************");
            console.log(item.handle_status_name, "******************");
            if (item.handle_status === 1) {
                console.log(item.id);
                uni.navigateTo({
                    url: `./processed/processed?id=${item.id}`
                });
            } else if (item.handle_status_name === "未处理") {
                uni.navigateTo({
                    url: `./untreated/untreated?id=${item.id}&handle_status=${
                        item.handle_status_name
                    }`
                });
            } else if (item.handle_status === 2) {
                uni.navigateTo({
                    url: `./distort/distort?id=${item.id}`
                });
            }
        },
        bindEquipment(e) {
            //e.target.value 可以拿到下标,直接用赋值的数组取出来即可
            console.log(this.array[e.target.value]);
            this.equipment = this.array[e.target.value].name;
            this.equipment_ids = this.array[e.target.value].id;
            console.log(this.array[e.target.value]);
            let token = uni.getStorageSync("token");
            uni.request({
                url: `https://yl.solid-cn.com/wechat/v1/equipment/choiceRegister?equipment_id=${
                    this.equipment_ids
                }`,
                header: {
                    Accept: "application/json",
                    xcx: 1,
                    Authorization: `Bearer ${token}`
                }
            }).then(res => {
                // console.log(res,"右边右边右边")
                this.array1 = res[1].data.result;
            });
        },
        bindPickerChange(e) {
            this.dataEquipment = this.array1[e.target.value].name;
            this.dataEquipment_ids = this.array1[e.target.value].id;
            console.log(this.array1[e.detail.value].id);
            this.form = {
                created_at: this.changDtae,
                page: 1,
                equipment_id: this.equipment_ids,
                register_id: this.dataEquipment_ids
            }
            request({
                url: "v1/alarmRecord/list",
                data: this.form
                // data: {
                //     equipment_id: this.equipment_ids,
                //     register_id: this.dataEquipment_ids
                // }
            }).then(res => {
                console.log(res);
                this.navList = res.data.result.list.data;
            });
        },
        bindDateChange(e) {
            this.equipmentTime = e.detail.value;
            console.log(e.detail.value);
            // this.form = {
            //     equipment_id: this.equipment_ids,
            //     register_id: this.dataEquipment_ids,
            //     created_at: e.detail.value
            // }
            this.changDtae = e.detail.value
            this.form["created_at"] = e.detail.value
            this.form["page"] = 1
            request({
                url: "v1/alarmRecord/list",
                data: this.form
            }).then(res => {
                this.navList = res.data.result.list.data;
            });
        },
        bindPickerScreen(e) {
            if (this.array2[e.detail.value] == "未处理") {
                this.form = {
                    page: 1,
                    created_at: this.changDtae,
                    handle_status: 0
                }
                this.getData(this.form)
                this.scsreen = " 未处理 "
            } else if (this.array2[e.detail.value] == "已处理") {
                this.form = {
                    page: 1,
                    created_at: this.changDtae,
                    handle_status: 1
                }
                this.getData(this.form)
                this.scsreen = " 已处理 "
            } else if (this.array2[e.detail.value] == "误报") {
                this.form = {

                    page: 1,
                    created_at: this.changDtae,

                    handle_status: 2
                }
                this.getData(this.form)
                this.scsreen = " 误报 "
            }
        },
        getData(form) {
            request({
                url: "v1/alarmRecord/list",
                data: form
            }).then(res => {
                this.navList = res.data.result.list.data;
            })
        },
        bindData() {
            console.log(123);
        },
        bindTime() {
            console.log(123);
        }
    }
};
</script>

<style lang="less">
page {
    background: #ffffff;
}

.navTop {
    position: fixed;
    top: 0rpx;
    z-index: 99;
    width: 750rpx;
    background: #ffffff;
}

.num1 {
    color: white;
    width: 40rpx;
    height: 40rpx;
    font-size: 22rpx;
    text-align: center;
    background: red;
    border-radius: 50%;
    line-height: 40rpx;
    position: absolute;
    left: 225rpx;
}

.num2 {
    color: white;
    width: 40rpx;
    height: 40rpx;
    font-size: 22rpx;
    text-align: center;
    background: red;
    border-radius: 50%;
    line-height: 40rpx;
    position: absolute;
    left: 600rpx;
}

.consult2 {
    margin-top: 20rpx;
    background: #f2f8fb;
    display: flex;
    height: 200rpx;

    .consult2-left {
        img {
            height: 200rpx;
            width: 230rpx;
        }
    }

    .consult2-right {
        // flex: 2;

        .consult2-right2 {
            position: relative;
            top: 31rpx;
            right: -11rpx;
        }

        .consult2-right5 {
            text-align: center;
            line-height: 40rpx;
            width: 80rpx;
            height: 40rpx;
            font-size: 28rpx;
            color: #005079;
            position: relative;
            top: -15rpx;
            right: -365rpx;

            background: #fedfe8;
            border-radius: 24rpx;
        }

        .consult2-right3 {
            position: relative;
            top: 40rpx;
            right: 0rpx;
            font-size: 26rpx;
            margin-top: 10rpx;
            text-align: center;
            line-height: 32rpx;
            width: 128rpx;
            height: 32rpx;
            background: #ecf2f5;
            border-radius: 24rpx;
            color: #005079;
        }

        .consult2-right4 {
            position: relative;
            top: 25rpx;
            right: -210rpx;
            display: flex;
            font-size: 20rpx;
            justify-content: space-between;
            color: #656565;
            letter-spacing: 0;
            line-height: 12rpx;
            display: flex;
            justify-content: space-between;
        }
    }
}

.content {
    margin-top: 24rpx;
    display: flex;
    height: 220rpx;

    .contentMsg {
        font-size: 28rpx;
        color: #353535;
        letter-spacing: 0;
        line-height: 22rpx;
        // margin-left: 60rpx;
    }

    .contentTime {
        position: relative;
        top: 91rpx;
        display: flex;
        justify-content: space-between;
        font-size: 12rpx;
        color: #656565;
        letter-spacing: 0;
        line-height: 12rpx;
        display: flex;
        justify-content: space-between;

        // margin-left: 60rpx;
        // margin-top: 20rpx;
        .msg {
            margin-top: 10rpx;
            text-align: center;
            line-height: 32rpx;
            width: 128rpx;
            height: 32rpx;
            background: #ecf2f5;
            border-radius: 24rpx;
            color: #005079;
        }
    }

    .conten-right {
        background: #ffffff;
        padding: 24rpx;
    }
}

.nav-name {
    flex: 1;
    // width: 84rpx;
    line-height: 84rpx;
    text-align: center;

    .nav-name-in {
        line-height: 84rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 84rpx;
    }
}

.act {
    font-size: 24rpx;
    color: #0062a2;
    text-align: center;
    line-height: 24rpx;
    border-bottom: 3rpx solid #0062a2;
}

.nav {
    display: flex;

    .nav-name {
        .nav-name-in {
            box-sizing: border-box;
            justify-content: center;
            height: 84rpx;
            width: 375rpx;
            text-align: center;
            line-height: 84rpx;
            font-size: 32rpx;

            text {
                font-size: 28rpx;
                line-height: 88rpx;
            }
        }
    }
}

.uni-input {
    line-height: 50rpx;
    color: white;
}

.nav-title {
    display: flex;
    justify-content: space-around;
    padding: 0 18rpx;

    .nav-title-in {
        width: 165rpx;
        height: 60rpx;
        text-align: center;
        font-size: 21rpx;
        margin-top: 20rpx;
        background: #e8f0f4;
        border: 1rpx solid #e5ecf3;
        border-radius: 2rpx;

        text {
            color: black;
            line-height: 60rpx;
        }
    }
}

.nav-list {
    margin: 15rpx auto;
    width: 702rpx;
    height: 210rpx;
    background: #e8f0f4;
    border-radius: 4px;
    position: relative;

    .circle {
        width: 18rpx;
        height: 18rpx;
        background: red;
        border-radius: 50%;
        position: absolute;
        top: 33rpx;
        left: 170rpx;
    }

    .nav-list-in {
        padding: 32rpx;

        .nav-list-in-item {
            display: flex;
            justify-content: space-between;

            .nav-list-in-item-name {
                font-weight: 500;
                font-size: 30rpx;
                color: #353535;
                letter-spacing: 0;
                line-height: 26rpx;
            }

            .nav-list-in-item-date {
                font-size: 24rpx;
                color: #656565;
                letter-spacing: 0;
                line-height: 24rpx;
            }
        }
    }

    .nav-list-data {
        margin-top: 27rpx;
        font-size: 32rpx;
        display: flex;
        justify-content: space-between;

        text {
            font-size: 24rpx;
            color: #222222;
            text-align: left;
            line-height: 24rpx;
        }
    }

    .condition {
        margin-top: 20rpx;

        .tex {
            font-size: 30rpx;
        }
    }

    .nav-list-content {
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;

        .nav-list-content-in {
            font-size: 24rpx;
            color: #222222;
            text-align: left;
            line-height: 24rpx;
        }

        .nav-list-content-button {
            position: relative;
            bottom: 70rpx;
            left: 537rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 104rpx;
            height: 48rpx;
            background: #38c782;
            border-radius: 10rpx;
            font-size: 24rpx;
            color: #ffffff;
            text-align: left;
            line-height: 24rpx;
        }

        .nav-list-content-button2 {
            position: relative;
            bottom: 70rpx;
            left: 537rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 104rpx;
            height: 48rpx;
            background: #ed471d;
            border-radius: 10rpx;
            font-size: 24rpx;
            color: #ffffff;
            text-align: left;
            line-height: 24rpx;
        }

        .nav-list-content-button3 {
            position: relative;
            bottom: 70rpx;
            left: 537rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 104rpx;
            height: 48rpx;
            background: #fba727;
            border-radius: 10rpx;
            font-size: 24rpx;
            color: #ffffff;
            text-align: left;
            line-height: 24rpx;
        }
    }
}

.nva-top {
    height: 160rpx;
    width: 480rpx;
    // overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1rpx solid #e7e7e7;
    margin-top: 30rpx;

    .nva-top-msg {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-top: 25rpx;
        margin-left: 15rpx;
        margin-bottom: 5rpx;

        .navCircle {
            width: 18rpx;
            height: 18rpx;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 13rpx;
            left: 140rpx;
        }

        .nav-top-msg-consult {
            font-size: 30rpx;
        }

        .nav-top-msg-date {
            font-size: 20rpx;
            color: #939392;
            margin-right: 112rpx;
        }
    }

    .nva-top-content {
        font-size: 30rpx;
        color: #939392;
        margin-left: 15rpx;
    }
}

.nva-bottom {
    height: 70px;
    width: 375px;
    padding-top: 18px;

    img {
        width: 16px;
        height: 16px;
    }

    .bottom-info {
        display: flex;
        justify-content: space-between;

        text {
            font-size: 14px;
            color: #353535;
            letter-spacing: 0;
            line-height: 14px;
        }

        view {
            font-size: 10px;
            color: #959595;
            letter-spacing: 0;
            text-align: right;
            line-height: 10px;
            margin-top: 10px;
        }

        .nav-date {
            display: flex;
        }
    }

    .msg {
        font-size: 12px;
        color: #959595;
        letter-spacing: 0;
        line-height: 12px;
    }
}
</style>
